<template>
  <div class="marketingContainer flex-column">
    <div class="marketingTitle" v-if="$route.name=='marketing'">全部营销功能</div>
    <div class="marketingFeatures flex-row" v-if="$route.name=='marketing'">
      <div class="featureEntry flex-column"
        v-for="(feature, index) in features"
        :key="index"
        @click="go(feature)"
        >
        <div class="featureName">{{feature.name}}</div>
        <img :src="feature.icon" alt="">
      </div>
    </div>
    <div class="marketingHeader pageHeader" v-if="$route.name!='marketing'&&feature">
      <span class="backToMarket" @click="backToMarket">全部营销工具</span>
      <span class="fontGrey"> — {{feature.name}}</span>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
import discussIcon from '@/assets/images/marketing-discuss.png';
import groupIcon from '@/assets/images/marketing-group.png';
import responseIcon from '@/assets/images/marketing-response.png';
import keywordIcon from '@/assets/images/marketing-keyword.png';
import qrcodeIcon from '@/assets/images/marketing-qrcode.png';
import autoverifyIcon from '@/assets/images/marketing-autoverify.png';
import changeIcon from '@/assets/images/marketing-change.png';
import replyIcon from '@/assets/images/marketing-reply.png';
export default {
  name: 'marketing',
  data() {
    return {
      feature: null,
      features: [
        // {
        //   name: '建讨论组',
        //   icon: discussIcon,
        //   disable: false,
        //   route: 'discuss'
        // },

        {
          name: '建群',
          icon: groupIcon,
          disable: false,
          route: 'creategroup'
        },
        {
          name: '新好友应答',
          icon: responseIcon,
          disable: false,
          route: 'friendresponse'
        },
         {
          name: '关键词回复',
          icon: replyIcon,
          disable: false,
          route: 'autoreply'
        },
        {
          name: '关键词拉群',
          icon: keywordIcon,
          disable: false,
          route: 'keyword'
        },
        {
          name: '活码',
          icon: qrcodeIcon,
          disable: false,
          route: 'ncode'
        },
        {
          name: '自动通过验证',
          icon: autoverifyIcon,
          disable: false,
          route: 'autoverify'
        },
        {
          name: '会员管理',
          icon: autoverifyIcon,
          disable: false,
          route: 'vipmanager'
        },
        {
          name: '群裂变',
          icon: autoverifyIcon,
          disable: false,
          route: 'groupfission'
        }
        // {
        //   name: '微信换群',
        //   icon: changeIcon,
        //   disable: true,
        //   route: 'changegroup'
        // }
      ]
    }
  },
  created() {
    const route = this.$route.name
    this.feature = this.features.filter(f=>f.route == route)[0];
  },
  methods: {
    go(feature) {
      if (feature.disable) return this.$msg('该功能暂未开放')
      if(feature.route === 'autoverify')return this.$router.push('/addfriend/verify')
      this.feature = feature
      this.$router.push(`/marketing/${feature.route}`)
    },
    backToMarket() {
      this.$router.push('/marketing')
    }
  }
}
</script>
<style scoped>
.marketingContainer .marketingFeatures{
  justify-content: space-around;
}
</style>
